<template>
    <div class="orderListRuleForm">
        <panle title='注册链接' content="注册链接"></panle>
        <el-button v-if="is_pingtai == 1" class="create_link" type="primary" size="mini" @click="createdInviteLink">创建二级推广员注册码</el-button>
        <el-button v-if="is_pingtai == 1" class="create_link" type="primary" size="mini" @click="createdOneLink">一级推广员注册码</el-button>
        <!--注册链接列表-->
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="popu_name" label="姓名"></el-table-column>
                  <el-table-column prop="link_yard" label="唯一识别码"></el-table-column>
                  <el-table-column prop="link_qrcode" label="链接"></el-table-column>
                  <el-table-column prop="junior_num" label="下级推广员数量"></el-table-column>
                  <el-table-column prop="link_level" label="级别">
                        <template slot-scope="scope">
                            <span v-if="scope.row.popu_level == 1">一级</span>
                            <span v-else>二级</span>
                        </template>
                  </el-table-column>
                <el-table-column prop="status" label="推广员状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">正常</span>
                        <span v-else>离职</span>
                    </template>
                </el-table-column>
                <el-table-column prop="singn_link_type" label="链接状态-直达"></el-table-column>
                <el-table-column prop="is_jump" label="跳转推广员"></el-table-column>
                <el-table-column prop="id" label="操作">
                      <template slot-scope="scope">
                          <el-button type="text" v-if="scope.row.inherit_popu_user_id == 0" size="mini" icon="fa fa-pencil" @click="inheritLink(scope.row)">继承</el-button>
                          <span v-else>已被继承</span>
                          <el-button type="text" size="mini" icon="fa fa-pencil" @click="viewQrcode(scope.row)">查看</el-button>
                      </template>
                  </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="form.total">
                </el-pagination>
            </div>
        </div>
        <!--创建注册链接-->
        <el-dialog :visible.sync="createdOpen" v-loading="loading" :before-close="handleClose" width="50%" append-to-body title="创建二级推广员注册码">
            <el-form ref="selectStaffForm" :model="selectStaffForm">
                <el-form-item label="选择推广员：" prop="popu_user_id">
                    <el-select size="mini" v-model="selectStaffForm.popu_user_id" placeholder="请选择一级推广员">
                        <el-option v-for="(item,index) in staffData"
                                   :key="index"
                                   :label="item.popu_name"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="subselectStaffForm('selectStaffForm') " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!--一级注册链接-->
        <el-dialog :visible.sync="oneOpen" :before-close="handleClose" width="500px" height="500px" append-to-body title="生成一级推广的链接">
          <div style="display: flex;align-items: center;justify-content: center; height: 300px;">
            <el-image :src="popuRegData.qrcode" fit="fill" style="width: 300px;height: 300px;"></el-image>
          </div>
          <el-button style="margin-left: 15px" type="text" size="mini" @click="downloadQrcode(popuRegData.qrcode)">下载</el-button>
        </el-dialog>
        <!--继承注册链接-->
        <el-dialog :visible.sync="inviteOpen" :before-close="handleClose" width="1000px" append-to-body title="选择继承推广员">
            <el-form :inline="true" ref="staffForm" :model="staffForm" label-width="100px" class="demo-form-inline">
                <el-form-item label="推广员昵称:" prop="popu_name">
                    <el-input size="mini" placeholder="请输入" v-model="staffForm.popu_name"></el-input>
                </el-form-item>
                <el-form-item label="唯一标识:" prop="popu_yard">
                    <el-input size="mini" placeholder="请输入" v-model="staffForm.popu_yard"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="table-wrap">
                <el-table :data="inviteStaffData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                    <el-table-column prop="popu_name" label="推广员"></el-table-column>
                    <el-table-column prop="popu_yard" label="唯一标识"></el-table-column>
                    <el-table-column prop="junior_num" label="下级数量"></el-table-column>
                    <el-table-column prop="is_invite" label="是否继承过"></el-table-column>
                    <el-table-column prop="id" label="操作">
                        <template slot-scope="scope">
                            <PersButton type="text" size="mini" label="继承" icon="fa  fa-pencil" @click="inherit(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleInviteSizeChange" @current-change="handleInviteCurrentChange"
                                   :current-page="staffForm.pageInviteNumber" :page-sizes="[10, 50, 100, 200]"
                                   :page-size="staffForm.pageInviteSize"
                                   background layout="total, sizes, prev, pager, next, jumper"
                                   :total="staffForm.inviteTotal">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <!--执行继承操作-->
        <el-dialog :visible.sync="toInviteOpen" :before-close="handleClose" width="1000px" append-to-body title="提示">
            <span>
                确定由该推广员继承{{ needInviteData.popu_name }}全部下级并享受其接下来全部下级分佣？操作后将不可更改
            </span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="subToInviteForm('replenishForm') " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!--查看二维码-->
        <el-dialog :visible.sync="viewQrcodeOpen" :before-close="handleClose" v-loading="loading" width="500px" append-to-body title="查看二维码">
          <div style="display: flex;align-items: center;justify-content: center; height: 300px;">
            <el-image :src="viewQrcodeData.link_qrcode" fit="fill" style="width: 300px;height: 300px;"></el-image>
          </div>
          <el-button style="margin-left: 15px" type="text" size="mini" @click="downloadQrcode(viewQrcodeData.link_qrcode)">下载</el-button>
        </el-dialog>
    </div>
</template>

<script>
import {
    getList, getStaffList,createRegisterLink,getCanInheritStaffList,inheritRegisterLink,is_pingtai,getSelfInfo,createOneRegisterLink
} from "@/api/sell/register/register";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import index, {mapState} from "vuex";

export default {
    name:'Popu-Link',
    components: {
        Panle,
        PersButton,
    },
    computed:{
        ...mapState({
            userInfo: state => state.member.userInfo,
        }),
    },
    data() {
        return {
            loading:false,//加载
            createdOpen:false,
            inviteOpen:false,
            toInviteOpen:false,
            oneOpen:false,
            viewQrcodeOpen:false,
            tableData: [], //注册链接列表
            staffData:[], //员工列表
            inviteStaffData:[], //可以继承的员工列表
            needInviteData:[], //继承给员工的数据
            toInvitData:[], //继承链接的员工
            popuRegData:{},
            viewQrcodeData:{},
            form: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            selectStaffForm:{
                popu_user_id:''
            },
            staffForm:{
                popu_name:'',
                popu_yard:'',
                curretnId:'', //需要剔除的员工ID
                pageInviteSize: 10,
                pageInviteNumber: 1,
                inviteTotal: 0,
            },
          is_pingtai:0
        }
    },
    created() {
        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
          this.loading = true;
          this.form.page = this.form.pageNumber;
          this.form.size = this.form.pageSize;
            getList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.total = res.data.total;
                this.loading = false;
            })
            is_pingtai().then((res) => {
              this.is_pingtai = res.data.is_popu;
              this.loading = false;
            })
        },
        getCanInheritStaffList(){
            this.loading = true;
            getCanInheritStaffList(this.staffForm).then((res) => {
                this.inviteStaffData = res.data.data;
                this.staffForm.inviteTotal = res.data.total;
                this.loading = false;
                this.inviteOpen = true;
            })
        },

        //添加或者编辑完成后初始化弹框的内容
        initPopu(){
            this.selectStaffForm.popu_user_id = '';
        },

        //关闭弹框回调
        handleClose(){
            this.createdOpen = false;
            this.inviteOpen = false;
            this.oneOpen = false;
            this.viewQrcodeOpen = false;
            this.toInviteOpen = false;
            this.staffForm.popu_name = '';
            this.staffForm.popu_yard = '';
            this.staffForm.pageInviteSize = 10;
            this.staffForm.pageInviteNumber = 1;
            this.staffForm.inviteTotal = 0;
        },

        search: function () {
            this.loading = true;
            this.getCanInheritStaffList();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        handleInviteSizeChange: function (e) {
            this.form.pageSize = e;
            this.getCanInheritStaffList();
        },
        handleInviteCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.getCanInheritStaffList();
        },
        //创建提交
        subselectStaffForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    createRegisterLink(this.selectStaffForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.createdOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },

        //编辑提交
        subEditForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    this.resForm.add_id = this.userInfo.uid
                    this.$delete(this.resForm, 'proportion');
                    editePopuLink(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.popuOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        //创建链接
        createdInviteLink:function (e){
            this.loading = true;
            if(this.is_pingtai == 1){
              getStaffList(this.form).then((res) => {
                this.staffData = res.data;
                this.staffForm.inviteTotal = res.data.total;
                this.loading = false;
                this.createdOpen = true;
              })
            }else{
              getSelfInfo(this.form).then((res) => {
                this.staffData = res.data;
                this.staffForm.inviteTotal = 1;
                this.loading = false;
                this.createdOpen = true;
              })
            }

        },
        //创建一级推广员的链接
        createdOneLink:function (){
            this.oneOpen = true;
            this.loading = true;
            createOneRegisterLink().then((res) => {
              this.oneOpen = true;
              this.popuRegData = res.data
              this.loading = false;
            })
        },
        //继承链接数据
        inheritLink:function (e){
            this.loading = true;
            this.staffForm.curretnId = e.popu_user_id
            this.getCanInheritStaffList();
            this.needInviteData = e;
        },
        //继承操作弹框
        inherit:function (e){
            this.toInviteOpen = true;
            this.toInvitData = e;
        },
        //继承操作
        subToInviteForm:function (){
            var param = {
                'inherit_popu_user_id':this.toInvitData.id,
                'id':this.needInviteData.id
            }
            inheritRegisterLink(param).then((res)=>{
                if(res.code==200){
                    this.msgSuccess(res.msg);
                    this.toInviteOpen=false;
                    this.inviteOpen=false;
                    this.init();
                    this.initPopu();
                }else{
                    this.msgError(res.msg);
                }
            })
        },
        //赋值链接
        copyText:async function (e) {
          await navigator.clipboard.writeText(e);
          this.msgSuccess("复制成功！");
        },
        convertBase64ToPng(base64Data, callback) {
          // 将base64字符串转换为Blob对象
          const byteCharacters = atob(base64Data.split(',')[1]);
          const mimeString = base64Data.split(',')[0].match(/:([^;]+);/)[1];
          const arrayBuffer = new ArrayBuffer(byteCharacters.length);
          const uintArray = new Uint8Array(arrayBuffer);
          for (let i = 0; i < byteCharacters.length; i++) {
            uintArray[i] = byteCharacters.charCodeAt(i);
          }
          const blob = new Blob([uintArray], { type: mimeString });
          callback(blob);
        },
        //下载二维码
        downloadQrcode:function (e){
          this.convertBase64ToPng(e,pngData => {
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(pngData);
            downloadLink.download = 'popu_link_qrcode.png';
            downloadLink.click();
          })
        },

      viewQrcode:function (e){
          this.viewQrcodeOpen = true;
          this.viewQrcodeData = e;
      },
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}

.create_link{
    margin-top: 7px;
    margin-bottom: 7px;
}

.w50{
    width: 50px !important;
}
.w60{
    width: 60px !important;
}
.mr20{
    margin-right: 20px;
}
</style>
